<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <div class="top">
      <van-icon name="arrow-left" @click="returnTap" />
      <span>微信提醒</span>
      <van-icon name="ellipsis" @click="nextTap" />
    </div>
    <div class="list">
      <img src="../../../assets/images/logo.png" alt="" />
      <div class="list1">
        <span style="color:#9C9C9C">狗儿子</span>
        <span style="font-size:18px;margin-top:5px">好吧</span>
      </div>
      <span class="list2" style="margin-right:10px;font-size:15px ">59分钟之前</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    nextTap() {
      this.$router.push("/msgfuwushezhi");
    },
  },
};
</script>
<style scoped>
.all {
  background: #eeeeee;
}
.top {
  height: 60px;
  width: 90%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  position: relative;
  background: #eeeeee;
}
.list{
    margin: 10px 3%;
    width: 94%;
    background: #fff;
    border-radius: 10px;
    height: 80px;
    display: flex;
}
.list img{
    width: 30px;
    height: 30px;
    margin: 10px 0 0 20px;
}
.list1{
    display: flex;
    flex-direction: column;
    margin:  10px 10px;
    width: 54%;
}
.list2{
    margin:  10px 0px;  
}
</style>